import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Badge from '@material-ui/core/Badge';
import NotificationsIcon from '@material-ui/icons/Notifications';
import Popper from '@material-ui/core/Popper';
import Typography from '@material-ui/core/Typography';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';
import Link from '@material-ui/core/Link';

const useStyles = makeStyles(theme => ({
    root:{
        padding:theme.spacing(2)
    },
    typography: {
        padding: theme.spacing(0.5),
        fontSize:12,
    },
}));


export default function HeaderRight() {
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState(null);

    function handleClick(event) {
        setAnchorEl(anchorEl ? null : event.currentTarget);
    }

    const open = Boolean(anchorEl);
    const id = open ? 'simple-popper' : undefined;
    return (
        <React.Fragment>
            <IconButton aria-label="show 17 new notifications" color="inherit" onClick={handleClick}>
                <Badge badgeContent={17} color="secondary">
                    <NotificationsIcon />
                </Badge>
            </IconButton>
            <Popper id={id} open={open} anchorEl={anchorEl} transition style={{zIndex:9999}} onClose={handleClick}>
                {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={350}>
                        <Paper className={classes.root}>
                            <Typography className={classes.typography}><Link>已有3398条通知发送成功，3条发送失败 ......</Link></Typography>
                            <Typography className={classes.typography}><Link>已有3398条通知发送成功，3条发送失败 ......</Link></Typography>
                            <Typography className={classes.typography}><Link>已有3398条通知发送成功，3条发送失败 ......</Link></Typography>
                            <Typography className={classes.typography}><Link>已有3398条通知发送成功，3条发送失败 ......</Link></Typography>
                            <Typography className={classes.typography}><Link>已有3398条通知发送成功，3条发送失败 ......</Link></Typography>
                            <Link
                                component="button"
                                variant="body2"
                                style={{margin:'20px auto 0',display:'block'}}
                                >
                                查看全部消息
                            </Link>
                        </Paper>
                    </Fade>
                )}
            </Popper>
        </React.Fragment>
    )
}